import React from 'react';
import Mask from '@/components/Mask';
import QRCode from 'qrcode.react';
import CopyToClipboard from 'react-copy-to-clipboard';
import domtoimage from 'dom-to-image';
import { Row, Col, Card, Space, Input, Button, notification } from 'antd';
export default (props) => {
  const { visible = {}, show } = props;
  const { detail = {} } = visible;
  const { url } = detail;
  const maskProps = {
    width: 600,
    zIndex: 1000,
    title: '引导激活账号',
    ...props,
  }
  const handleSaveAsImage = () => {
    const node = document.getElementById('qrCode'); // 获取QRCode组件的DOM元素

    domtoimage.toBlob(node)
      .then(function (blob) {
        // 使用Blob生成下载链接
        const url = URL.createObjectURL(blob);
        // 创建一个链接并单击下载
        const link = document.createElement('a');
        link.href = url;
        link.download = '分享码.png';
        link.click();
      });
  }
  return (
    <Mask {...maskProps}>
      <Row gutter={[12, 12]}>
        <Col span={4}>  激活链接：</Col>
        <Col span={16}><Input disabled value={url} /> </Col>
        <Col span={4}>
          <CopyToClipboard text={url} onCopy={() => {
            notification.success({
              message: '温馨提示',
              description: '复制成功',
            });
          }}>
            <Button type='link'>复制</Button>
          </CopyToClipboard>
        </Col>
        <Col span={24}>
          <QRCode
            id="qrCode"
            value={url}
            size={200} // 二维码的大小
            fgColor="#000000" // 二维码的颜色
            style={{ margin: 'auto' }}
          />
        </Col>
        <Col span={24}           style={{ textAlign: 'center' }}>
          <Button onClick={() => handleSaveAsImage()} type='link'>
            下载
          </Button>
        </Col>
      </Row>

    </Mask>
  );
};
